<template>
  <!-- 实单报价 -->
  <div class="my-order">

    <el-card class="my-order-header">
      <el-radio-group v-model="ruleForm.status" :fill="ruleForm.status == '301' ? '#FA6400' : ''" size="small">
        <el-radio-button label="">全部</el-radio-button>
        <el-radio-button label="100">待报价</el-radio-button>
        <el-radio-button label="200">已报价</el-radio-button>
        <el-radio-button label="301" fill="#FA6400">超期未报价</el-radio-button>
        <el-radio-button label="300">无法报价</el-radio-button>
      </el-radio-group>

      <div class="my-order-form">
        <el-form :inline="true" ref="form" :model="ruleForm">

          <el-form-item label="型号:" placeholder="请输入型号" prop="partnumber">
            <el-input v-model="ruleForm.partnumber" clearable @keyup.enter.native="handleQuery" size="small"></el-input>
          </el-form-item>
          <el-form-item label="品牌:" v-show="ruleForm.status !== '200'" placeholder="请输入品牌" prop="brand">
            <el-input v-model="ruleForm.brand" clearable @keyup.enter.native="handleQuery" size="small"></el-input>
          </el-form-item>
          <el-form-item v-show="ruleForm.status == '200' || ruleForm.status == ''" label="报价状态:" prop="quotestatus">
            <el-select v-model="ruleForm.quotestatus" @change="handleQuery" clearable>
              <el-option label='全部' value=''></el-option>
              <el-option label='待采纳' value='100'></el-option>
              <el-option label='已采纳' value='200'></el-option>
              <el-option label='未采纳' value='201'></el-option>
              <el-option label='已生成订单' value='300'></el-option>
              <el-option label='待议价' value='101'></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="ruleForm.status == '200' ? '报价时间' : '交货日期'" prop="date">
            <mydate @getSelectData="getCreateDate" :createDate="ruleForm.date"></mydate>
          </el-form-item>

        </el-form>
        <div style="width:125px;white-space: nowrap;">
          <el-button type="primary" size="small" @click="handleQuery">查询</el-button>
          <el-button size="small" @click="handleReset">重置</el-button>
        </div>
      </div>

    </el-card>
    <el-card class="my-order-footer">
      <el-table :data="tableData" v-loading='loading' v-adaptive='{ bottomOffset: 80 }' height="300px" ref="table"
        style="width: 100%">
        <!-- <el-table-column :index="(index)=> (ruleForm.page-1)*ruleForm.pageSize+index+1"
                         type="index"
                         width="50">
        </el-table-column> -->
        <el-table-column label="操作" key="status" v-if="ruleForm.status == '100' || ruleForm.status == ''" min-width="80">
          <template slot-scope="{row}">
               <!-- <el-button type="text" class="btn" :disabled="0 == row.quoteRemainMin * 1 || row.limitQuoteCount <= row.quoteCount"
              @click="handleQuote(row)" v-if=" 0 <row.quoteCount < 1">
              {{ (0 == row.quoteRemainMin * 1 || row.limitQuoteCount <= row.quoteCount) ? "--" : "报价" }}</el-button> -->
              <el-button type="text" class="btn"  @click="handleQuote(row)" v-if=" 0 <row.quoteCount < 1 && row.quoteRemainMin != 0">报价</el-button>
              <el-button type="text" class="btn"  @click="handleQuote(row)" :disabled="0 == row.quoteRemainMin * 1"
              v-if="0 == row.quoteRemainMin * 1">--</el-button>
              <el-button type="text" v-show="row.quoteRemainMin != 0 && row.quoteCount == row.limitQuoteCount" class="btn"
              @click="handleShowDetail(row)">
              查看</el-button>
            <el-button type="text" class="btn"  @click="handleReQuote(row)" v-if="row.quoteRemainMin != 0 && row.quoteCount >= 1">
              再次报价</el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" key="status2" v-if="ruleForm.status == '200' " min-width="80">
          <template slot-scope="{row}">

            <el-button type="text" v-if="0 >= row.quoteRemainMin * 1 || row.limitQuoteCount <= row.quoteCount" class="btn"
              @click="handleShowDetail(row)">
              查看</el-button>
            <el-button type="text" class="btn" v-else @click="handleReQuote(row)">
              再次报价</el-button>
          </template>
        </el-table-column>
        <el-table-column label="参与度" prop="hotLevel" key="hotLevel" v-if="ruleForm.status == '301'" min-width="120">
          <template slot-scope="{row}">

            <template v-for="item in row.hotLevel * 1 ">
              <svg-icon icon-class="fire" :key='item' style=" width: 21px;height: 21px;" />
            </template>
          </template>
        </el-table-column>
        <el-table-column prop="quoteRemainMin" :key="'quoteRemainMin' + ruleForm.status"
          v-if="ruleForm.status == '100' || ruleForm.status == ''" label="剩余报价时间" min-width="120">
          <template v-slot="{ row }">

            <p style="color:#E02020"> {{ (0 >= row.quoteRemainMin * 1 ? "已结束" : row.quoteRemainMin) | manageTime }}</p>
          </template>

        </el-table-column>
        <el-table-column prop="quoteCount" key="quoteCount" v-if="ruleForm.status == '200' ||  ruleForm.status == ''" label="报价次数" min-width="80">
          <template v-slot="{ row }">
            <p v-if="row.quoteCount == '' || row.quoteCount == null || row.quoteCount == 0">-</p>
            <span v-else :style="row.quoteCount >= row.limitQuoteCount ? 'color:#E02020' : ''">
              {{ row.quoteCount }}/{{ row.limitQuoteCount }}
            </span>
          </template>
        </el-table-column>

        <el-table-column prop="quotePlace" key="quotePlace" v-if="ruleForm.status == '200' ||  ruleForm.status == ''" label="价格位次" min-width="120">
          <template v-slot="{ row }">
            <p v-if="row.quotePlace == '' || row.quotePlace == null || row.quotePlace == 0">-</p>
            <span v-else>{{ row.quotePlace }}</span>
          </template>
        </el-table-column>

        <el-table-column prop="product_partnumber" key="product_partnumber" label="型号" show-overflow-tooltip
          min-width="150">
          <template v-slot="{ row }">
            <p v-if="row.product_partnumber == '' || row.product_partnumber == null || row.product_partnumber == 0">-</p>
            <span v-else>{{ row.product_partnumber }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="product_brand" key="product_brand" label="品牌" show-overflow-tooltip min-width="120">
          <template v-slot="{ row }">
            <p v-if="row.product_brand == '' || row.product_brand == null || row.product_brand == 0">-</p>
            <span v-else>{{ row.product_brand }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="quantity" key="quantity" label="数量" min-width="120">
          <template v-slot="{ row }">
            <template v-if="ruleForm.status == 200">
              <p v-if="(row.quote && row.quote.quantity) == '' || (row.quote && row.quote.quantity) == null || (row.quote && row.quote.quantity) == 0">-</p>
              <span v-else> {{ row.quote && row.quote.quantity }}</span>
            </template>
            <template v-else>
              <p v-if="row.quantity == '' || row.quantity == null || row.quantity == 0">-</p>
              <span v-else> {{ row.quantity }}</span>
            </template>
          </template>
        </el-table-column>
        <el-table-column prop="product_dateCode" key="product_dateCode" label="批次" show-overflow-tooltip min-width="100">
          <template v-slot="{ row }">
            <template v-if="ruleForm.status == 200">
              <p v-if="(row.quote && row.quote.product.dateCode) == '' || (row.quote && row.quote.product.dateCode) == null || (row.quote && row.quote.product.dateCode) == 0">-</p>
              <span v-else>{{ row.quote && row.quote.product.dateCode }}</span>
            </template>
            <template v-else>
              <p v-if="row.product_dateCode == '' || row.product_dateCode == null || row.product_dateCode == 0">-</p>
              <span v-else>{{ row.product_dateCode }}</span>
            </template>
          </template>
        </el-table-column>
        <el-table-column prop="product_package" key="product_package" label="封装" show-overflow-tooltip min-width="120">
          <template v-slot="{row}">
            <p v-if="row.product_package == '' || row.product_package == null || row.product_package == 0">-</p>
            <span v-else>{{ row.product_package }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="adoptPrice" key="adoptPrice" label="接受价" min-width="120"> 
          <template v-slot="{ row }">
            <p v-if="(row.adoptPrice && row.adoptPrice) == '' || (row.adoptPrice && row.adoptPrice) == null || (row.adoptPrice && row.adoptPrice) == 0">-</p>
            <span v-else>{{ Number.isInteger(row.adoptPrice) ? row.adoptPrice + '.00' : row.adoptPrice}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="currency" key="currency"
          :label="(ruleForm.status == 100 || ruleForm.status == 301) ? '币种' : '询价币种'"
          v-if="ruleForm.status != 200 && ruleForm.status != ''" min-width="120">
          <template v-slot="{ row }">
            <p v-if="row.currency == '' || row.currency == null || row.currency == 0">-</p>
            <span v-else> {{ row.currency == 'USD' ? '美元' : '人民币' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="quote" v-if="ruleForm.status == '200' || ruleForm.status == ''"
          key="quote-inPrice-unitPrice" label="我的报价" min-width="120">
          <template v-slot="{ row }">
            <p v-if="(row.quote && row.quote.inPrice && row.quote.inPrice.unitPrice) == '' || (row.quote && row.quote.inPrice && row.quote.inPrice.unitPrice) == null || (row.quote && row.quote.inPrice && row.quote.inPrice.unitPrice) ==0 ">-</p>
            <span v-else> {{ Number.isInteger( row.quote && row.quote.inPrice && row.quote.inPrice.unitPrice) ?  row.quote && row.quote.inPrice && row.quote.inPrice.unitPrice + '.00' : row.quote && row.quote.inPrice && row.quote.inPrice.unitPrice}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="quoteCurrency" v-if="ruleForm.status == '200' || ruleForm.status == ''" key="quoteCurrency"
          :label="(ruleForm.status == 200 || ruleForm.status == '') ? '币种' : '报价币种'" min-width="120">
          <template v-slot="{ row }">
            <p v-if="row.quoteCurrency == '' || row.quoteCurrency == null || row.quoteCurrency == 0">-</p>
            <span v-else>{{ row.quoteCurrency }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="deliveryDate" key="deliveryDate" label="交货日期" min-width="120">
          <template v-slot="{ row }">
            <template v-if="ruleForm.status == 200">
              {{ row.quote && row.quote.deliveryDate.split(" ")[0] }}
            </template>
            <template v-else>
              {{ row.deliveryDate.split(" ")[0] }}
            </template>
          </template>
        </el-table-column>
        <el-table-column prop="deliveryPlace" key="deliveryPlace" label="交货地" min-width="120" >
          <template v-slot="{ row }">
            <template v-if="ruleForm.status == 200">
              <p v-if="(row.quote && row.quote.deliveryPlace) == '' || (row.quote && row.quote.deliveryPlace) == null || (row.quote && row.quote.deliveryPlace) == 0">-</p>
              <span v-else>{{
                row.quote &&
                (row.quote.deliveryPlace == "FArea01" ? "国内" : "香港")
              }}</span>
            </template>
            <template v-else>
              <p v-if="row.deliveryPlace == '' || row.deliveryPlace == null || row.deliveryPlace == 0">-</p>
              <span v-else> {{ row.deliveryPlace == "FArea01" ? "国内" : "香港" }}</span>
            </template>
          </template>
        </el-table-column>
        <el-table-column prop="quote" v-if="ruleForm.status == '200' || ruleForm.status == ''" key="c11urrency" label="报价公司"
          show-overflow-tooltip min-width="200">
          <template v-slot="{ row }">
            <p v-if="(row.quote && row.quote.supplier && row.quote.supplier.name) == '' || (row.quote && row.quote.supplier && row.quote.supplier.name) == null || (row.quote && row.quote.supplier && row.quote.supplier.name) == 0">-</p>
            <span v-else>{{ row.quote && row.quote.supplier && row.quote.supplier.name }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="product_packing" key="product_packing" label="包装" show-overflow-tooltip min-width="120">
          <template v-slot="{row}">
            <p v-if="row.product_packing == '' || row.product_packing == null || row.product_packing == 0">-</p>
            <span v-else>{{ row.product_packing }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="quoteRemainMin" v-if="ruleForm.status == '301'" key="quoteRemainMin1" label="剩余报价时间"
          min-width="120">

          <template>

            <span style="color:#E02020"> 已结束</span>
          </template>

        </el-table-column>

        <el-table-column prop="quote" v-if="ruleForm.status == '200' || ruleForm.status == ''" key="quote-status"
          label="报价状态" min-width="120">
          <template v-slot="{ row }">
            <p v-if="(row.quote && row.quote.statusDesc) == '' || (row.quote && row.quote.statusDesc) == null || (row.quote && row.quote.statusDesc) == 0">-</p>
            <span v-else> {{ row.quote && row.quote.statusDesc }}</span>
          </template>
        </el-table-column>
        <!-- 报价有效期 -->
        <!-- <el-table-column 
          prop="termDate"
          v-if="ruleForm.status=='200'"
          key="termDate-status"
          label="报价有效期"
          min-width="140"
        >
          <template v-slot="{row}">
            {{row.historyQuotes && row.historyQuotes[0].termDate}}
          </template>
        </el-table-column> -->

        <el-table-column prop="quote" v-if="ruleForm.status == '200' || ruleForm.status == ''" key="quote-id" label="报价单号"
          min-width="120"> 
          <template v-slot="{ row }">
            <p v-if="( row.quote && row.quote.id) == '' || ( row.quote && row.quote.id) == null || ( row.quote && row.quote.id) == 0">-</p>
            <span v-else>{{ row.quote && row.quote.id }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="id" key="id" v-if="ruleForm.status != 301 || ruleForm.status == ''" label="询价单号"
          min-width="120">
          <template v-slot="{row}">
            <p v-if="row.id == '' || row.id == null || row.id == 0">-</p>
            <span v-else>{{ row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column label="参与度" prop="hotLevel" key="hotLevel" v-if="ruleForm.status == ''" min-width="120">
          <template slot-scope="{row}">
            <p v-if="row.hotLevel == '' || row.hotLevel == null || row.hotLevel == 0">-</p>
            <template v-for="item in row.hotLevel * 1 ">
              <svg-icon icon-class="fire" :key='item' style=" width: 21px;height: 21px;" />
            </template>
          </template>
        </el-table-column>
        <el-table-column prop="noQuoteTime" v-if="ruleForm.status == '301' || ruleForm.status == ''" key="noQuoteTime"
          label="超期次数" min-width="120">
          <template v-slot="{row}">
            <p v-if="row.noQuoteTime == '' || row.noQuoteTime == null || row.noQuoteTime == 0">-</p>
            <span v-else>{{row.noQuoteTime}}</span>
          </template>
        </el-table-column>
      </el-table>
      <pagination :page.sync='ruleForm.page' :total.sync="total" :limit.sync='ruleForm.pageSize'
        layout=' total,sizes,prev, pager, next, jumper' @pagination='handleSearch'></pagination>
    </el-card>
    <el-drawer title="" size="560px" :visible.sync="drawerVisible" v-if="drawerVisible">
      <div slot="title">
        <h3 style="color: #333;
                      font-weight: bold;
                      display:inline-block;
                      margin-right:20px">供应商报价</h3>
        询价单号：{{ qutoData.id }}
        <el-divider />
      </div>
      <quto :qutoData='qutoData' v-if="ruleForm.status == '100'" @close="drawerVisible = !drawerVisible, handleQuery()" />
      <detail :qutoData='qutoData'
        v-else-if="ruleForm.status == '200' && (0 >= qutoData.quoteRemainMin * 1 || qutoData.limitQuoteCount <= qutoData.quoteCount)"
        @close="drawerVisible = !drawerVisible" />
      <requto :qutoData='qutoData' v-else @close="drawerVisible = !drawerVisible, handleQuery()" />
    </el-drawer>
  </div>
</template>
<script>
import quto from '../components/quto';
import requto from '../components/requto';
import detail from '../components/details';
import mydate from '@/components/Date/index.vue'

import Pagination from '@/components/Pagination';
import { getRealList } from '@/api/scsapi/index';
import { addTest } from '@/api/index-page-api/index';

export default {
  name: 'actualOffer',
  components: {
    Pagination,
    quto,
    requto,
    detail,
    mydate
  },
  data() {
    return {
      loading: false,
      ruleForm: {
        status: '100',
        partnumber: '',
        brand: '',
        date: [],
        quotestatus: '',
        page: 1,
        pageSize: 20,
      },
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            },
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            },
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            },
          },
          {
            text: '最近一年',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
              picker.$emit('pick', [start, end]);
            },
          },
        ],
      },
      tableData: [
        // {
        //   quoteRemainMin: "2023-03-31",
        //   quoteCount: "1/2",
        //   quotePlace: "2",
        //   product_partnumber: "RTL8201F-VB-CG",
        //   product_brand: "Analog Devices",
        //   quantity: "1000",
        //   product_dateCode: "21+",
        //   product_package: "SOT-223",
        //   adoptPrice: "16.00",
        //   currency: "人民币",
        //   quote: "11111",
        //   id: 1,
        //   hotLevel: "",
        //   noQuoteTime: "111"
        // }
      ],
      total: 0,
      drawerVisible: false,
      qutoData: {},
      interval: null,
    };
  },
  computed: {},
  created() {
    this.handleQuery();
    // let a = [
    //     'B2212020014',
    //     'B2212020011',
    //     'B2212020010',
    //     'B2212020012',
    //     'B2212020009',
    //     'B2212020008',
    //     'B2212020007',
    //     'B2212020006',
    //     'B2212020005',
    //     'B2212020004',
    //     'B2212020013',
    //     'B2212060001',
    //     'B2212060002',
    // ];

    // a.map(x => {
    //     addTest(x + '-001');
    //     addTest(x + '-002');
    //     addTest(x + '-003');
    // });
  },
  watch: {
    'ruleForm.status': function (nv, ov) {
      // 切换到不同状态时切换筛选值
      if (nv == 200) {
        this.ruleForm.date = [];
        this.ruleForm.brand = '';
      }
      if (ov == 200) {
        this.ruleForm.date = [];
        this.ruleForm.quotestatus = '';
      }
      this.ruleForm.page = 1;
      this.handleQuery();
    },
  },
  methods: {
    // 交货日期
    getCreateDate(date) {
      this.ruleForm.date = date;
    },
    // 获取数据
    handleQuery() {
      this.ruleForm.page = 1;
      this.handleSearch();
    },
    handleSearch() {
      this.tableData = [];
      this.loading = true;
      getRealList(this.ruleForm)
        .then(res => {
          if (res.status == 200) {
            res.data.rows.forEach(x => {
              for (let y in x.product) {
                x['product_' + y] = x.product[y];
              }
            });
            this.tableData = res.data.rows;
            if (this.interval) {
              clearInterval(this.interval);
            }
            if (this.tableData.some(x => x.quoteRemainMin > 0)) {
              this.interval = setInterval(() => {
                this.tableData.map(x => {
                  if (x.quoteRemainMin > 0) {
                    x.quoteRemainMin--;
                    if (x.quoteRemainMin <= 0) {
                      this.$refs.table.toggleRowSelection(x, false);
                    }
                  }
                });
              }, 1000);
            }
            // this.tableData.map(item=>{
            //   val = parseFloat(item.adoptPrice)
            //   if(Number.isInteger(val)){
            //     val += '.00'
            //   }
            // })

            this.total = res.data.total;
          }
          this.loading = false;
        })
        .catch(() => {
          this.loading2 = false;
        });
    },
    // 报价
    handleQuote(row) {
      this.qutoData = row;
      this.drawerVisible = true;
    },
    handleReQuote(row) {
      this.qutoData = row;
      this.drawerVisible = true;
    },
    handleShowDetail(row) {
      this.qutoData = row;
      this.drawerVisible = true;
    },
    // 重置
    handleReset() {
      this.$refs['form'].resetFields();
      this.handleQuery();
    },
  },
  filters: {
    manageTime(v) {
      if (!v || isNaN(v)) {
        return v;
      } else {
        let hour = parseInt(v / 3600);
        let min = parseInt((v - hour * 60 * 60) / 60);
        let sec = parseInt((v % 3600) - min * 60);
        return `${hour < 10 ? '0' + hour : hour}:${min < 10 ? '0' + min : min}:${sec < 10 ? '0' + sec : sec}`;
      }
    },
  },
};
</script>

<style scoped lang="scss" src="@/assets/styles/public.scss"></style>

<style lang="scss" scoped>
::v-deep .el-divider--horizontal {
  margin: 0 0 !important;
  width: 105%;
  // padding-left: 20px !important;
  // margin-left: 20px !important;
}

.my-order {
  margin: 0 14px;
  margin-top: 5px;

  .my-order-header {
    margin-bottom: 10px;
  }

  .my-order-form {
    padding: 15px 15px 5px 15px;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;

    .el-form {
      display: flex;
    }

    .el-form-item {
      margin-bottom: 0 !important;
      margin-right: 30px;
    }
  }
}

::v-deep .el-drawer__header {
  align-items: baseline;
  margin-bottom: 0px !important;

  .el-divider {
    margin: 0 0 20px 0;
  }
}

::v-deep .el-radio-button {
  margin: 0 15px;

  .el-radio-button__inner {
    border-left: 1px solid #dcdfe6;
    box-shadow: none !important;
    border-radius: 4px !important;
  }
}
</style>












